<template>
	<view class="relative full-screen">
		<view style="z-index:0;position:absolute;left:0;right:0;top:0;height:396px;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);"></view>
		<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
		</uni-nav-bar>
		<view class="flex-col item-center" :style="`height: calc(100vh - ${navBarHeight || 0}px);`">
			<text class="mt-20 mb-44 ml-22 text-color-regular fs-20 font-semibold text-title">欢迎登录</text>
			<view class="mx-16 black fs-14 font-normal">
				<input type="number" placeholder="请输入手机号" class="inp-box" :class="{'unactive':unActiveRule('mobile')}" v-model="formData.mobile">
				<input type="password" placeholder="请输入登录密码" class="inp-box mt-24" :class="{'unactive':unActiveRule('userPass')}" v-model="formData.userPass">
				<button class="mt-50 h-46 leading-46 radius-23 bg-primary text-white fs-16 font-semibold" @click="phoneLoginHandle">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup name="Login">
	import {
		computed,
		onMounted,
		ref,
		getCurrentInstance,
		watch
	} from 'vue'
	import {
		authCodeApi,
		getWxMobileApi
	} from '@/api/auth.js'
	import {
		uploadFileApi
	} from '@/api/common.js'
	import {
		checkPhoneNumber,
	} from '@/utils/index.js'
	import {onLoad} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import { useWebView } from '@/hooks/useWebView.js'
	
	const webview = useWebView()
	let redirect = ref(null)
	let code = ref(null)
	const from = ref('') // 从哪个页面触发登录的
	const userStore = useUserStore()
	const instance = getCurrentInstance()

	const navBar = ref(null)
	
	const formData = ref({
		mobile: '',
		userPass: '',
	})

	const goBack = () => {
		if(!redirect.value){
			uni.navigateBack()
		}
	}
	
	const linkUrl = () => {
		if(redirect.value == 'busi'){
			let params = code.value?`?code=${code.value}`:``
			uni.redirectTo({
				url: `/applyPages/bussinessApply/bussinessAgreement${params}`
			})
		}else if(redirect.value == 'bbus'){
			let params = code.value?`?code=${code.value}`:``
			uni.redirectTo({
				url: `/applyPages/bindBusiness/bindBusiness${params}`
			})
		} else if (from.value) {
			const eventChannel = instance.ctx.getOpenerEventChannel()
			eventChannel.emit('onLoginSuccess')
			let url = decodeURIComponent(decodeURIComponent(from.value))
			uni.redirectTo({
				url
			})
			// uni.navigateBack()
		}else{
			uni.redirectTo({
				url: '/pages/home/home'
			})
		}
	}
	
	const formRule = ref(false)
	const phoneLoginHandle = async() => {
		const formDataTip = {
			mobile: '请输入手机号', 
			userPass: '请输入密码',
		}
		let flag = null,title=''
		Object.keys(formData.value).forEach(key => {
			if(!flag){
				if ((!formData.value[key] && String(formData.value[key]) != '0') && formDataTip[key]) {
					flag = key
				}
				if(!flag){
					if(key == 'mobile' && !checkPhoneNumber(formData.value[key])){
						title = '请输入正确的手机号'
						flag = key
					}
				}
			}
		})
		if (flag) {
			formRule.value = true
			uni.showToast({
				icon: 'none',
				title: title||formDataTip[flag]
			})
			return
		}else{
			formRule.value = false
		}
		uni.showLoading()
		await userStore.phoneLogin({
			...formData.value
		})
		await userStore.getUserInfo()
		uni.hideLoading()
		linkUrl()
	}
	const unActiveRule = (name) => {
		if(formRule.value){
			if(!formData.value[name] && String(formData.value[name]) != '0'){
				return true
			}
		}
		return false
	}

	const token = ref('')
	
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})

	onMounted(() => {
	})
	onLoad((query) => {
		from.value = query.from || ''
		if(query.re){
			redirect.value = query.re
			code.value = query.code
		}
	})
</script>
<style lang="scss" scoped>
	.text-title{
		align-self: flex-start;
		margin-top: 144rpx;
	}
	.inp-box {
		width: 670rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding-left: 20rpx;
		border:1px solid rgba(245, 245, 245, 1);
		&.unactive{
			border-color:#FA4543;
		}
	}
</style>